<!-- 我的试卷页面-->
<template>
  <div id="myExam">
    <div class="wrapper">
            <!-- 顶部内容 -->
      <ul class="top">
        <li class="order">考试列表</li>
        <li class="search-li">
          <div class="icon">
            <input type="text" placeholder="试卷名称" class="search" v-model="pagination.examName">
          <i class="el-icon-search"></i>
        </div>
      </li>
        <li><el-button type="primary" @click="search()">搜索试卷</el-button></li>
      </ul>

      <!-- 考试内容区域 -->
      <div class="content">
        <div v-if="examList.length === 0" class="no-exams-message">
          <div class="message-box">
            <i class="el-icon-sunny"></i>
              <p>好好休息吧。你暂时没有任何考试哦</p>
          </div>
        </div>

        <ul class="paper" v-loading="loading">
        <li class="item" v-for="(item,index) in examList" :key="index">
          <h4 @click="toExamMsg(item.examCode)">{{item.source}}</h4>
          <p class="name">{{item.source}}-{{item.description}}</p>
          <div class="info">
            <i class="el-icon-loading"></i><span>{{item.examDate.substr(0,10)}}</span>
            <i class="iconfont icon-icon-time"></i><span v-if="item.totalTime != null">限时{{item.totalTime}}分钟</span>
            <i class="iconfont icon-fenshu"></i><span>满分{{item.totalScore}}分</span>
          </div>
        </li>
        </ul>
      </div>

              <!-- 固定在底部的分页 -->
        <div class="pagination-wrapper">
        <div class="pagination">
          <el-pagination
            v-show="total>0"
            :total="total"
            v-model:page="pagination.pageNum"
            v-model:limit="pagination.pageSize"
            @pagination="getExamInfo"
          />
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import {listStudentExam}from '@/api/student/exam/exam'



const userStore = useUserStore()

// 响应式数据
const loading = ref(false)
const total = ref(0)
const pagination = ref({
  pageNum: 1,
  pageSize: 6,
  examName:null
})

const examList = ref([])

const router = useRouter()

// 获取考试信息
const getExamInfo =  () => {
    listStudentExam(
    {userId:userStore.id,
    pageNum:pagination.value.pageNum,
    pageSize:pagination.value.pageSize})
    .then(res=>{
    examList.value=res.rows
    total.value=res.total
  })
}


// 跳转到试卷详情页
const toExamMsg = (examCode) => {
  router.push({ path: '/examMsg', query: { examCode } })
  console.log(examCode)
}

// 生命周期：组件挂载后加载数据
onMounted(() => {
  getExamInfo()
})
</script>

<style lang="less" scoped>

#myExam {
  position: relative;
  min-height: 85vh; /* 确保容器有最小高度 */
    // background-color: red;
      width: 1200px;
  margin: 0 auto;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 85vh; /* 与父容器高度一致 */
  margin-top: 65px;
}

.content {
  flex: 1; /* 占据剩余空间 */
}

.pagination-wrapper {
  position: sticky;
  bottom: 0;
  padding: 20px 0;
  z-index: 10; /* 确保在内容上方 */
  border-top: 1px solid #eee; /* 可选的上边框 */
}

/* 其他原有样式保持不变 */
.pagination {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.pagination {
  padding: 20px 0px 30px 0px;
  display: flex;
    justify-content: center;

}
.paper {
  h4 {
    cursor: pointer;
    color: #000;
  }
}
.paper .item a {
  color: #000;
}
.wrapper .top .order {
  cursor: pointer;
}
.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}
.item .info i {
  margin-right: 5px;
  color: #0195ff;
}
.item .info span {
  margin-right: 14px;
}
.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217,222,234,0.3);
  transition: all 0.6s ease;
}
.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}
.paper .item .info {
  font-size: 14px;
  color: #88949b;
}
.paper .item .name {
  font-size: 14px;
  color: #88949b;
}
.paper * {
  margin: 20px 0;
}
.paper li {
      list-style-type: none; /* 取消前面的点 */

}
.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}
.top .icon {
  position: relative;
  // background-color: #fff;
}
.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
#myExam .search-li {
  margin-left: auto;
}
.top .search-li {
  margin-left: auto;
}
.top li {
  display: flex;
  align-items: center;

}
.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  background-color: transparent;
}
.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}
.wrapper .top {
  display: flex;
}
.wrapper .top li {
  margin: 20px;
}




#myExam .wrapper {
  //改背景颜色
  background-color: #fff;
}


.no-exams-message {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.message-box {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.message-box i {
  font-size: 40px;
  color: #f6b73c;
  margin-right: 15px;
}

.message-box p {
  font-size: 16px;
  color: #555;
  font-weight: 500;
  margin: 0;
}
</style>
